<template>
  <div>
    <z-box>
      <z-title name="动态样式与动态hover样式绑定"></z-title>
      <div class="tabs">
        <div class="tab" v-for="(tab, index) in tabs" :key="tab" @click="tabClick(tab, index)"
          :style='styleObj' :class="{ 'tab-active': tabIndex === index }" >
          {{ tab }}
        </div>
      </div>
    </z-box>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tabIndex: 1,
      tabs: ['关系图谱', '目标轨迹', '伴随分析', '碰撞分析'],
      tabColor: 'url(' + require('../../../assets/img/tab.png') + ')',
      tabHoverColor: 'url(' + require('../../../assets/img/tab-active.png') + ')',
    }
  },
  computed: {
    styleObj() {
      return {
        "--background-color": this.tabColor,
        "--background-color-hover": this.tabHoverColor,
      };
    }
  },
  watch: {
    tabIndex (val) {
      if (val === 2) {
        this.tabColor = 'url(' + require('../../../assets/img/tab_bg_default.png') + ')'
        this.tabHoverColor = 'url(' + require('../../../assets/img/tab_bg_press.png') + ')'
      } else {
        this.tabColor = 'url(' + require('../../../assets/img/tab.png') + ')'
        this.tabHoverColor = 'url(' + require('../../../assets/img/tab-active.png') + ')'
      }
    }
  },
  methods: {
    tabClick(tab, index) {
      this.tabIndex = index;
    },
  }
}
</script>

<style lang="scss" scoped>
.tabs {
  padding: 20px;
  margin-bottom: 18px;
  border-bottom: 1px solid #EEEEEE;
  .tab {
    display: inline-block;
    width: 100px;
    margin-left: -6px;
    line-height: 33px;
    color: #333333;
    cursor: pointer;
    text-align: center;
    background: var(--background-color) no-repeat;
    background-size: 100% 100%;
    z-index: 10;
    &:hover {
      color: #ffffff;
      background: var(--background-color-hover) no-repeat;
      background-size: 100% 100%;
      z-index: 11;
    }
  }
  .tab-active {
    color: #ffffff;
    background: var(--background-color-hover) no-repeat;
    background-size: 100% 100%;
    z-index: 11;
  }
}
</style>